<template>
  <div class="main">
    <div class="left">
      <div class="title">
        <span> 分区、分组选择： </span>
        <button @click="toogleTable">{{ buttonText }}</button>
      </div>
      <div class="tables">
        <div v-if="showTable === 1">
          <el-table :data="tableData" style="width: 100%; height: 100%">
            <el-table-column
              type="index"
              min-width="20"
              label="序号"
            ></el-table-column>
            <el-table-column prop="eNumber" label="设备号" min-width="40">
            </el-table-column>
            <el-table-column prop="eName" label="设备名称"> </el-table-column>
          </el-table>
        </div>
        <div v-else>
          <el-table :data="tableData1" style="width: 100%; height: 100%">
            <el-table-column
              type="index"
              min-width="20"
              label="序号"
            ></el-table-column>
            <el-table-column prop="eNumber" label="设备号" min-width="40">
            </el-table-column>
            <el-table-column prop="eName" label="设备名称"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="scroll">
        <div><span>滚动次数:</span><input type="text" /></div>
        <div><span>滚动速度:</span><input type="text" /></div>
      </div>
      <div class="LED"><span>LED文本：</span><input type="text" /></div>
    </div>
    <div class="right">
      <div class="title">定时点分区:</div>
      <div class="tables">
        <el-table :data="tableData2" style="width: 100%; height: 100%">
          <el-table-column
            type="index"
            min-width="20"
            label="序号"
          ></el-table-column>
          <el-table-column prop="eNumber" label="设备号" min-width="40">
          </el-table-column>
          <el-table-column prop="eName" label="设备名称"> </el-table-column>
        </el-table>
      </div>
      <div class="buttons">
        <button @click="lastStep">上一步</button><button>完成</button>
      </div>
    </div>
    <div class="volumn">
      <button >+</button>
      <el-slider v-model="vol" vertical height="20vw" />
      <button>-</button>
      <div class="show">音量：默认</div>
    </div>
  </div>
</template>
<script setup>
import { inject, ref } from "vue";
import editMusicVue from "./editMusic.vue"
const showTable = ref(1);
const buttonText = ref("分区");
const changeComponent=inject('changeComponent')

const vol=ref(0)
function toogleTable() {
  showTable.value = showTable.value === 1 ? 0 : 1;
  buttonText.value = showTable.value ? "分区" : "分组";
}

const lastStep=()=>{
  changeComponent({Components:editMusicVue})
}
const tableData = ref([
  {
    eNumber: 111,
    eName: "一班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "一班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "一班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "一班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
]);
const tableData1 = ref([
  {
    eNumber: 111,
    eName: "一班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "二班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "二班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "二班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
]);

const tableData2 = ref([
  {
    eNumber: 111,
    eName: "一班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "二班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "二班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
  {
    eNumber: 111,
    eName: "二班",
    eType: "广播",
    eIP: "11.11.11",
    eStatus: "空闲",
  },
]);
</script>
<style lang="less" scoped>
@import url("./less/fenqu.less");
</style>


